<template>
  <div >
    <van-row>
        <van-nav-bar
            title="评价"
            fixed
            placeholder
            left-text="返回"
            @click-left="onCancel"
        >
          <template #left>
            <van-icon  @click="onCancel" color="black" size="22" name="arrow-left" />
          </template>
        </van-nav-bar>

      <van-col span="24">
        <van-cell-group inset>
          <van-cell center :border="false">
            <template #icon>
              <van-image
                  style="padding-right: 10px;"
                  width="40"
                  height="40"
                  :lazy-load="true"
                  fit="fill"
                  src="https://gitee.com/herther/img/raw/master/img/20210912143504.png"
              />
            </template>
            <template #title>
                <span style="font-size: 1.2em;font-weight: bolder;">华莱士（工学院店）</span>
            </template>
          </van-cell>

          <van-cell center :border="false">
            <template #title>
              <span style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
                 <van-rate
                     v-model="value"
                     :size="30"
                     :color="color"
                     void-icon="star"
                     void-color="#eee"
                     @change="onChangeRate"
                 />
                <span :style="`font-size: .5em;` ,`color:`+ color +`;` ">
                    {{ message }}
                </span>
              </span>
            </template>
          </van-cell>
<!--          <van-field name="rate" label="评分">-->
<!--            <template #input>-->
<!--              <van-rate v-model="value" />-->
<!--            </template>-->
<!--          </van-field>-->
          <van-cell :border="false" title="评价内容"/>
          <van-field
              v-model="evaluateValue"
              rows="3"
              autosize
              type="textarea"
              maxlength="50"
              placeholder="可以描述问题帮助商家改善"
              show-word-limit
          />
          <van-cell :border="false" title="上传图片"/>
              <van-field name="uploader" >
                <template #input>
                  <van-uploader v-model="uploader" />
                </template>
              </van-field>

          <van-cell :border="false">
            <van-button round :loading="loading" color="#f52443" type="info" loading-text="评价中..." @click="onClick" size="large">提交</van-button>
          </van-cell>

        </van-cell-group>
      </van-col>



    </van-row>
  </div>
</template>

<script>
export default {
  name: "editEvalute",
  data(){
    return {
      value:0,
      message:'',
      evaluateValue:'',
      color:'black',
      loading:false,
      uploader: [{ url: 'https://img01.yzcdn.cn/vant/leaf.jpg' }],
    }
  },
  methods: {
    onCancel(){
      this.$router.replace("/Evaluate")
    },
    onChangeRate(value){
      switch (value){
        case 1:
          this.color = '#747d8c';
          this.message = '非常差'
          break;
        case 2:
          this.color = '#747d8c';
          this.message = '差'
          break;
        case 3:
          this.color = '#ffd21e';
          this.message = '一般'
          break;
        case 4:
          this.color = '#ffd21e';
          this.message = '满意'
          break;
        case 5:
          this.color = '#f52443';
          this.message = '超赞'
          break;
      }
    },
    onClick(){
        if (this.value == 0){
          this.$toast.fail('尚未评价（星级）');
          return;
        }
        this.loading = true;
        setTimeout(()=>{
          this.$toast.success('评价成功');
          this.loading = false;
          setTimeout(()=>{
            const toast = this.$toast.loading({
              duration: 0, // 持续展示 toast
              forbidClick: true,
              message: ' 2 秒后跳转评价页',
            });
            let second = 2;
            const timer = setInterval(() => {
              second--;
              if (second) {
                toast.message = `${second} 秒后跳转评价页`;
              } else {
                clearInterval(timer);
                // 手动清除 Toast
                this.$toast.clear();
                this.$router.replace("/Evaluate")
              }
            }, 1000);
          },1000);


        },1500)

    }
  },



}
</script>

<style scoped>

</style>
